<template>
  <div class="login-body">
    <div class="login-panel">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        @submit.prevent
      >
        <div class="login-title">
          管理员登录
        </div>
        <!-- 账号-->
        <el-form-item prop="account">
          <el-input
            clearable
            placeholder="请输入账号"
            v-model.trim="formData.account"
            size="large"
          >
            <template #prefix>
              <span class="iconfont icon-account"></span>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            clearable
            placeholder="请输入密码"
            v-model.trim="formData.password"
            size="large"
            type="password"
          >
            <template #prefix>
              <span class="iconfont icon-password"></span>
            </template>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="checkCode">
          <div class="check-code-panel">
            <el-input
              clearable
              placeholder="请输入验证码"
              v-model.trim="formData.checkCode"
              size="large"
              @keyup.native="login"
            >
              <template #prefix>
                <span class="iconfont icon-checkcode"></span>
              </template>
            </el-input>
            <img
              :src="checkCodeUrl"
              class="check-code"
              @click="changeCheckCode"
            >
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="default"
            style="width: 100%;"
            @click="login"
          >
            登录
          </el-button>

        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script setup>
import md5 from 'js-md5'
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const formData = ref({});
const formDataRef = ref();
const rules = {
  account: [{ required: true, message: "账号不能为空" }],
  password: [{ required: true, message: "密码不能为空" }],
  checkCode: [{ required: true, message: "验证码不能为空" }],
};

const api = {
  checkCode: 'api/checkCode',
  login: '/login'
}

// 验证码
const checkCodeUrl = ref(api.checkCode)
const changeCheckCode = () => {
  checkCodeUrl.value = api.checkCode + "?" + new Date().getTime();
}

const login = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    let params = Object.assign({}, formData.value)
    params.password = md5(params.password)
    let result = await proxy.Request({
      url: api.login,
      params: params,
      errorCallback: () => {
        changeCheckCode();
      }
    })
    if (!result) {
      return;
    }
    router.push('/forum/article');
    proxy.Message.success("登录成功");
    proxy.VueCookies.set("userInfo", result.data, 0)
  })
}
</script>

<style lang="scss" scoped>
.login-body {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-image: url('../assets/bgc.png');
  display: flex;
  justify-content: center;
  align-items: center;

  .login-panel {
    width: 400px;
    background: rgba(255, 255, 255, 0.8);
    padding: 30px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s ease-in-out;

    .login-title {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    .el-form-item {
      margin-bottom: 20px;

      .el-input {
        border-radius: 5px;
      }

      .iconfont {
        color: #999;
      }
    }

    .check-code-panel {
      display: flex;
      align-items: center;

      .check-code {
        margin-left: 10px;
        cursor: pointer;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: transform 0.2s ease;
      }

      .check-code:hover {
        transform: scale(1.05);
      }
    }

    .el-button {
      width: 100%;
      height: 40px;
      font-size: 16px;
      border-radius: 5px;
      background-color: #409eff;
      color: #fff;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #66b1ff;
      }
    }
  }
}

/* 添加淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
